<template>
	<view class="detail">
		<headertop title="详情" :back1="back1" str1="oridei"></headertop>
		<up-swiper height="375px" :list="list6" @click="clickloop" @change="e => currentNum = e.current" autoplay
			circular="true" indicatorStyle="right: 20px">
			<template #indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
				</view>
			</template>
		</up-swiper>
		<view class="spinfo">
			<view class="jiageinfo">
				<image :src="_static('/images/Rectangle 22980@2x.png')" class="jiageinfoback" mode="">
				</image>
				<view class="jiageline">
					<view class="jigae">
						<view class="">
							￥
							<span style="font-size:48rpx ;">{{jigaefun(shangpingObj.price)}}.</span>
							<span style="font-size:30rpx ;">{{jigaefun(shangpingObj.price,'后')}}</span>
						</view>

						<!-- 	<view class="memberjiage" v-if="shangpingObj.price">
							会员价：{{shangpingObj.price[0]}}
						</view> -->
					</view>

					<view class="gnq">
						<button class="righttex" style="margin-right: 36rpx;" open-type="share">
							<image :src="_static('/images/Frame@2x(42).png')" class="rightteximg" mode="">
							</image>
						</button>
						<!-- 		<image style="margin-left: 36rpx;" src="https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/Frame@2x(43).png"
							@click="collectfun" class="gnqitem" mode="">
						</image> -->
						<!-- <image style="margin-left: 36rpx;"
							src="https://chunchi.oss-cn-beijing.aliyuncs.comhttps://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/static/sccc.png" class="gnqitem"
							@click="collectfun" mode="" v-else>
						</image> -->
					</view>
				</view>
			</view>
			<view class="shangpinfo">
				<view class="shangpinfocenter">
					<view class="title">
						{{shangpingObj['title']}}
					</view>
					<view class="text">
						{{shangpingObj['subtitle']}}
					</view>
					<!-- <view class="text" v-if="shangpingObj.subtitle.length<40">
							{{shangpingObj.subtitle}}
						</view>
						<view class="text" v-if="shangpingObj.subtitle.length>40">
							{{ flag?shangpingObj.subtitle:shangpingObj.subtitle.slice(0,40)+'...'}}
						</view> -->
					<!-- 	<view class="open" v-if="shangpingObj.subtitle.length>40" @click="flag=!flag">
							{{flag?'收起':'展开查看更多'}} <up-icon :name="flag?'arrow-up':'arrow-down'" color="#0077BE" size="14"
								bold></up-icon>
						</view> -->
				</view>
				<view class="jiange">

				</view>
				<view class="canshubox" @click="open('服务')">
					<span style="color:#1D2129;margin-left: 32rpx;">服务：</span>
					<span style="color: #86909C;">{{servicefun(shangpingObj['service'])}}</span>
				</view>
				<view class="canshubox" @click="open('参数')">
					<span style="color:#1D2129;margin-left: 32rpx;">参数：</span>
					<span style="color: #86909C;">{{paramsfun(shangpingObj['params'])}}</span>
				</view>
				<view class="jiange" style="margin-top: 0rpx;">

				</view>
				<view class="spdetail">
					<view class="titleline">
						<image :src="_static('/images/Group 11590@2x.png')" mode="" class="imh"></image>
						<span>商品详情</span>
						<image :src="_static('/images/Group 11590@2x.png')" mode="" class="imh"></image>
					</view>
					<view class="content">
						<up-parse :content="shangpingObj.content"></up-parse>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 196rpx;">

		</view>
		<view class="fixedbox">
			<view class="centerbox">
				<button open-type="contact" class="itembox">
					<image src="/static/images/Frame@2x(1).png" class="itembox_icon" mode="">
					</image>
					<view class="title">
						联系客服
					</view>
				</button>
				<view class="btnss1">
					<view class="leftbtn" @click="open1('购物车')">
						<image :src="_static('/images/Rectangle 24367@2x.png')" mode="">
						</image>
						加入购物车
					</view>
					<view class="rightbtn" @click="open1('立即购买')">
						<image :src="_static('/images/Rectangle 24368@2x.png')" mode=""></image>
						立即购买
					</view>
				</view>
			</view>
		</view>
		<up-popup :show="show" mode="bottom" @close="closefun">
			<view class="sp">
				<view class="centerinfo">
					<view class="spline">
						<image :src="state.selectedSkuPrice.image||shangpingObj['image']" mode="" @click="yulan()">
						</image>
						<view class="texts">
							<view class="t1">
								{{shangpingObj.title}}
							</view>
							<view class="t2">
								{{shangpingObj.subtitle}}
							</view>
							<view class="bottomline">

								<view class="jiage1" v-if="state['selectedSkuPrice']['price']">
									￥
									<span
										style="font-size:40rpx ;">{{jigaefun(state['selectedSkuPrice']['price']*num*1)}}.</span>
									<span
										style="font-size:30rpx ;">{{jigaefun(state['selectedSkuPrice']['price']*num,'后')}}</span>
								</view>
								<view class="jiage1" v-else>
									￥
									<span style="font-size:40rpx;" v-if="shangpingObj.price">
										{{jigaefun(shangpingObj.price[0]*num)}}.</span>
									<span style="font-size:30rpx;" v-if="shangpingObj.price">
										{{jigaefun(shangpingObj.price[0]*num,'后')}}</span>
								</view>
							</view>
						</view>
					</view>
					<view class="guigebox">
						<template v-for="item in shangpingObj.skus" :key="item.id">
							<view class="title">
								{{item.name}}：
							</view>
							<view class="guigeboxs">
								<view v-for="ite in item.children" :key="ite.id" :class="[
									{
									  'ui-BG-Main-Gradient': state.currentSkuArray[ite.parent_id] == ite.id,
									},
		          {
		            'disabled-btn': ite.disabled == true,
		          },'box'
		        ]" @click="onSelectSku(ite.parent_id,ite.id,ite.disabled)">
									{{ite.name}}
								</view>
							</view>
						</template>

						<view class="goumainum">
							<view class="lable">
								购买数量：
							</view>
							<view class="shuliangbiox">
								<image :src="_static('/images/11Group 11197@2x.png')" class="icon" mode=""
									@click="onNumberChange('-')"></image>
								<span style="margin-left:16rpx ;margin-right:16rpx ;">{{num}}</span>
								<image :src="_static('/images/Group 11462@2x.png')" class="icon" mode=""
									@click="onNumberChange('+')"></image>
							</view>

						</view>
						<view class="jiarugwc" @click="onAddCart">
							{{typestr=='购物车'?'加入购物车':'立即购买'}}
						</view>
					</view>
				</view>
			</view>
		</up-popup>


		<image :src="_static('/images/Group 11589@2x.png')" @click="zhid" v-if="back1" class="zhidingbtn" mode="">
		</image>
		<detail-cell-params ref="paramsref" v-model="shangpingObj.params" />
		<detail-cell-service ref="serviceref" v-model="shangpingObj.service" />
		<userlogin ref="denglu"></userlogin>
	</view>
</template>

<script setup>
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import {
		setToken,
		getToken,
	} from '@/ulm/utils/auth';
	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue'
	const statusBarHeight = ref('')
	import detailCellParams from './components/detail/detail-cell-params.vue';
	import detailCellService from './components/detail/detail-cell-service.vue';
	import ulm, {
		$api
	} from '@/ulm';
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const barHeight = ref('')
	const state = reactive({
		selectedSkuPrice: {},
		currentSkuArray: [],
	});
	const paramsref = ref(null)
	const denglu = ref(null)
	const typestr = ref('')
	const show = ref(false)
	const serviceref = ref(null)
	const skuList = ref({})
	const back1 = ref('')
	const num = ref(0)
	const shangpingObj = ref({})
	const currentNum = ref(0)
	const list6 = ref([
		'https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/image@2x(2).png',
		'https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/image@2x(2).png',
		'https://zhengzhou5.zos.ctyun.cn/manxingbing/xcx/images/image@2x(2).png'
	]);
	onLoad((opt) => {
		init(opt.id)
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	watch(
		() => state.selectedSkuPrice,
		(newVal) => {
			num.value = 1
		}, {
			immediate: true, // 立即执行
			deep: true, // 深度监听
		},
	);
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
	})

	function open1(str) {
		typestr.value = str
		show.value = true
	}

	function yulan() {
		var imgurl = state.selectedSkuPrice.image || shangpingObj.value['image']
		uni.previewImage({
			current: imgurl, // 当前显示图片的http链接
			urls: [imgurl] // 可以预览多张图片，只需将urls数组中的URLs替换即可
		});
	}

	function closefun() {
		show.value = false
	}


	async function onAddCart() {
		if (!getToken()) {
			denglu.value.DengLu()
			return
		}
		if (state.selectedSkuPrice.goods_id) {
			if (state.selectedSkuPrice.stock <= 0) {
				uni.showToast({
					title: '库存不足',
					icon: 'none'
				})
			} else {
				if (typestr.value == '购物车') {
					const res = await $api.cartupdate({
						goods_id: shangpingObj.value.id,
						goods_num: num.value,
						goods_sku_price_id: state.selectedSkuPrice.id,
						type: ''
					})
					if (res.code == 1) {
						uni.showToast({
							title: '加入购物车成功',
							icon: 'none'
						})
						show.value = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				} else {
					state.selectedSkuPrice.goods_num = num.value
					uni.setStorageSync('detailobj', shangpingObj.value)
					uni.setStorageSync('selectedSkuPrice', state.selectedSkuPrice)
					uni.navigateTo({
						url: '/sub_shoppingmal/index/querendingdan'
					})

				}
			}
		} else {
			uni.showToast({
				title: '请选择规格',
				icon: 'none'
			})
		}
	}

	// 选择规格
	function onSelectSku(pid, skuId, bool) {

		if (bool) return
		// 清空已选择
		let isChecked = true; // 选中 or 取消选中
		if (state.currentSkuArray[pid] != undefined && state.currentSkuArray[pid] == skuId) {
			// 点击已被选中的，删除并填充 ''
			isChecked = false;
			state.currentSkuArray.splice(pid, 1, '');
		} else {
			// 选中
			state.currentSkuArray[pid] = skuId;
		}

		let chooseSkuId = []; // 选中的规格大类
		state.currentSkuArray.forEach((sku) => {
			if (sku != '') {
				// sku 为空是反选 填充的
				chooseSkuId.push(sku);
			}
		});

		// 当前所选规格下，所有可以选择的 skuPric
		let newPrice = getCanUseSkuPrice();

		// 判断所有规格大类是否选择完成
		if (chooseSkuId.length == skuList.value.length && newPrice.length) {
			newPrice[0].goods_num = state.selectedSkuPrice.goods_num || 1;
			state.selectedSkuPrice = newPrice[0];
		} else {
			state.selectedSkuPrice = {};
		}

		// 改变规格项禁用状态
		changeDisabled(isChecked, pid, skuId);
	}

	function btnClick(str) {
		if (str == '立即购买') {
			uni.navigateTo({
				url: '/sub_shoppingmal/index/querendingdan'
			})
		} else {

		}
	}
	async function init(id) {
		const res = await $api.shoprodetail({
			id
		})
		if (res.code == 1) {
			shangpingObj.value = res.data
			list6.value = shangpingObj.value.images
			if (!shangpingObj.value.is_sku) {
				state.selectedSkuPrice = shangpingObj.value.sku_prices[0];
			}
			changeDisabled(false);
		}
	}
	// 可选规格
	const skuPrices = computed(() => {
		let skuPrices = shangpingObj.value.sku_prices;
		if (skuPrices) {
			skuPrices.forEach((item) => {
				if (item.goods_sku_ids) {
					item.goods_sku_id_arr = item.goods_sku_ids.split(',');
				}
			});
		}
		return skuPrices;
	});

	//输入框改变数量
	function onNumberChange(str) {
		if (!state.selectedSkuPrice.goods_id) {
			uni.showToast({
				title: '请选择规格',
				icon: 'none'
			})
			return
		}
		if (num.value >= state.selectedSkuPrice.stock) {
			uni.showToast({
				title: '商品库存不足',
				icon: 'none'
			})
			return
		}
		// var e = num.value
		// if (e === 0) return;
		// if (state.selectedSkuPrice.goods_num === e) return;
		// state.selectedSkuPrice.goods_num = e;
		if (str == '-') {
			if (num.value == 1) return
			num.value--
		} else {
			num.value++
		}

	}
	// 改变禁用状态
	function changeDisabled(isChecked = false, pid = 0, skuId = 0) {
		let newPrice = []; // 所有可以选择的 skuPrice

		if (isChecked) {
			// 选中规格
			// 当前点击选中规格下的 所有可用 skuPrice
			for (let price of skuPrices.value) {
				if (price.stock <= 0) {
					// this.goodsNum 不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 stock 和 goods_num 的小值
					continue;
				}
				if (price.goods_sku_id_arr.indexOf(skuId.toString()) >= 0) {
					newPrice.push(price);
				}
			}
		} else {
			// 取消选中
			// 当前所选规格下，所有可以选择的 skuPrice
			newPrice = getCanUseSkuPrice();
		}

		// 所有存在并且有库存未选择的规格项 的 子项 id
		let noChooseSkuIds = [];
		for (let price of newPrice) {
			noChooseSkuIds = noChooseSkuIds.concat(price.goods_sku_id_arr);
		}

		// 去重
		noChooseSkuIds = Array.from(new Set(noChooseSkuIds));

		if (isChecked) {
			// 去除当前选中的规格项
			let index = noChooseSkuIds.indexOf(skuId.toString());
			noChooseSkuIds.splice(index, 1);
		} else {
			// 循环去除当前已选择的规格项
			state.currentSkuArray.forEach((sku) => {
				if (sku.toString() != '') {
					// sku 为空是反选 填充的
					let index = noChooseSkuIds.indexOf(sku.toString());
					if (index >= 0) {
						// sku 存在于 noChooseSkuIds
						noChooseSkuIds.splice(index, 1);
					}
				}
			});
		}

		// 当前已选择的规格大类
		let chooseSkuKey = [];
		if (!isChecked) {
			// 当前已选择的规格大类
			state.currentSkuArray.forEach((sku, key) => {
				if (sku != '') {
					// sku 为空是反选 填充的
					chooseSkuKey.push(key);
				}
			});
		} else {
			// 当前点击选择的规格大类
			chooseSkuKey = [pid];
		}
		skuList.value = shangpingObj.value.skus;
		for (let i in skuList.value) {
			// 当前点击的规格，或者取消选择时候 已选中的规格 不进行处理
			if (chooseSkuKey.indexOf(skuList.value[i]['id']) >= 0) {
				continue;
			}

			for (let j in skuList.value[i]['children']) {
				// 如果当前规格项 id 不存在于有库存的规格项中，则禁用
				if (noChooseSkuIds.indexOf(skuList.value[i]['children'][j]['id'].toString()) >= 0) {
					skuList.value[i]['children'][j]['disabled'] = false;
				} else {
					skuList.value[i]['children'][j]['disabled'] = true;
				}
			}
		}

	}
	// 当前所选规格下，获取所有有库存的 skuPrice
	function getCanUseSkuPrice() {
		let newPrice = [];

		for (let price of skuPrices.value) {
			if (price.stock <= 0) {
				// || price.stock < this.goodsNum		不判断是否大于当前选择数量，在 uni-number-box 判断，并且 取 stock 和 goods_num 的小值
				continue;
			}
			var isOk = true;

			state.currentSkuArray.forEach((sku) => {
				// sku 不为空，并且，这个 条 skuPrice 没有被选中,则排除
				if (sku.toString() != '' && price.goods_sku_id_arr.indexOf(sku.toString()) < 0) {
					isOk = false;
				}
			});

			if (isOk) {
				newPrice.push(price);
			}
		}

		return newPrice;
	}

	function jigaefun(str1, strr) {
		let number = Number(str1).toFixed(2)
		let str = number.toString(); // 转换为字符串 "100.00"
		let parts = str.split('.'); // 按小数点分割
		let integerPart = parts[0]; // "100"
		let decimalPart = parts[1] || "00"; // "00"（如果没有小数部分，默认 "00"）
		if (!strr) {
			return integerPart
		} else {
			return decimalPart
		}

	}

	function zhid() {
		uni.pageScrollTo({
			scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
			duration: 300 // 滚动动画的时长
		})
	}

	function clickloop(e) {
		uni.previewImage({
			current: e, // 当前显示图片的http链接
			urls: list6.value // 可以预览多张图片，只需将urls数组中的URLs替换即可
		});
	}
	// async function collectfun() {
	// 	if (!getToken()) {
	// 		denglu.value.DengLu()
	// 		console.log(123123);
	// 		return
	// 	}

	// 	const res = await favorite({
	// 		goods_id: shangpingObj.value.id,
	// 	})
	// 	if (res.code == 1) {
	// 		setTimeout(() => {
	// 			uni.showToast({
	// 				title: res.msg,
	// 				icon: 'none'
	// 			})
	// 		}, 500)
	// 		init(shangpingObj.value.id)
	// 	} else {
	// 		uni.showToast({
	// 			title: res.msg
	// 		})
	// 	}
	// }

	function servicefun(arr) {
		if (!arr) return ''
		var names = arr.map(item => item.name)
		return names.join(' | ')
	}

	function paramsfun(arr) {
		if (!arr) return ''
		var names = arr.map(item => item.title)
		return names.join(' · ')
	}



	function open(str) {
		if (str == '服务') {
			serviceref.value.open()
		} else {
			paramsref.value.open()
		}
	}
</script>

<style lang="scss">
	.ui-BG-Main-Gradient {
		background: #2AB4F5 !important;
		color: #FFFFFF !important;
	}

	.disabled-btn {
		font-weight: 400 !important;
		color: #c6c6c6 !important;
		background: #f8f8f8 !important;
	}

	::v-deep .u-popup__content {
		background-color: rgba(0, 0, 0, 0) !important;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
	}

	.sp {
		width: 100%;
		overflow: hidden;
		background: #F7F8FA;
		border-radius: 48rpx 48rpx 0rpx 0rpx;

		.centerinfo {
			width: 686rpx;
			margin: auto;
			margin-top: 32rpx;

			.guigebox {
				width: 100%;
				overflow: hidden;
				margin-top: 52rpx;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1D2129;
				}

				.jiarugwc {
					width: 686rpx;
					height: 88rpx;
					background: #81D6FF;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					text-align: center;
					line-height: 88rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-top: 52rpx;
					margin-bottom: 68rpx;
				}

				.goumainum {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 60rpx;

					.lable {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #1D2129;
					}


					.shuliangbiox {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-weight: 400;
						font-size: 32rpx;
						color: #1D2129;

						.icon {
							width: 48rpx;
							height: 48rpx;
						}
					}
				}

				.guigeboxs {
					width: 100%;
					overflow: hidden;
					margin-top: 28rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.box {
						padding: 0 32rpx;
						height: 52rpx;
						background: #FFFFFF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						line-height: 52rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						margin-right: 28rpx;
						margin-bottom: 20rpx;
					}
				}
			}

			.spline {
				width: 100%;
				display: flex;
				align-items: center;

				image {
					width: 138rpx;
					height: 124rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}

				.texts {
					width: 500rpx;
					overflow: hidden;
					/*禁止换行*/
					white-space: nowrap;
					/*显示省略号*/
					text-overflow: ellipsis;
					margin-left: 20rpx;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;
						overflow: hidden;
						/*禁止换行*/
						white-space: nowrap;
						/*显示省略号*/
						text-overflow: ellipsis;
					}

					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #86909C;
						overflow: hidden;
						/*禁止换行*/
						white-space: nowrap;
						/*显示省略号*/
						text-overflow: ellipsis;
						margin-top: 16rpx;
					}

					.bottomline {
						width: 100%;
						display: flex;
						align-items: center;

						.tt1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
						}

						.jiage1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #F53F3F;
						}
					}
				}
			}
		}
	}

	.zhidingbtn {
		width: 84rpx;
		height: 84rpx;
		position: fixed;
		bottom: 20%;
		right: 0%;
	}

	button {
		border: none !important;
		align-items: center;
		overflow: auto !important;
		background: none !important;
		background-color: none !important;
		background-size: 100% 138% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0rpx !important;
		-webkit-tap-highlight-color: none !important;
		overflow: hidden !important;

		&:after {
			background: none !important;
			border: none;
			background-color: none !important;
			display: none !important;
		}
	}

	.detail {
		width: 100%;
		overflow: hidden;

		.fixedbox {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			overflow: hidden;
			position: fixed;
			bottom: 0%;
			z-index: 999;

			.btnss1 {
				width: 538rpx;
				display: flex;
				align-items: center;
				margin-left: 52rpx;

				.leftbtn {
					width: 270rpx;
					height: 78rpx;
					border-radius: 20rpx 0rpx 0rpx 20rpx;
					text-align: center;
					line-height: 78rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #2AB4F5;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 268rpx;
						height: 78rpx;
						position: absolute;
						z-index: -1;
					}

				}

				.rightbtn {
					width: 268rpx;
					height: 78rpx;
					border-radius: 0 39rpx 39rpx 0;
					text-align: center;
					line-height: 78rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFAF5;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 268rpx;
						height: 78rpx;
						position: absolute;
						z-index: -1;
					}
				}
			}

			.centerbox {
				width: 686rpx;
				margin: auto;
				display: flex;
				align-items: center;
				margin-top: 34rpx;
				margin-bottom: 84rpx;

				.itembox {
					width: 96rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #86909C;
					}

					&_icon {
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}

		.spinfo {
			width: 100%;
			overflow: hidden;
			margin-top: -10rpx;

			.shangpinfo {
				width: 100%;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 0rpx 0rpx;
				overflow: hidden;
				margin-top: -50rpx;

				.canshubox {
					width: 100%;
					display: flex;
					align-items: center;
					height: 92rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #86909C;
				}

				.spdetail {
					width: 686rpx;
					margin: auto;
					overflow: hidden;
					margin-top: 28rpx;

					.content {
						width: 100%;
						margin-top: 28rpx;

						image {
							width: 100%;
						}
					}

					.titleline {
						width: 202rpx;
						margin: auto;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;

						.imh {
							width: 22.75rpx;
							height: 27.26rpx;
						}
					}
				}

				.jiange {
					width: 100%;
					height: 28rpx;
					background: #F7F8FA;
					margin-top: 24rpx;
				}

				.shangpinfocenter {
					width: 686rpx;
					margin: auto;
					overflow: hidden;

					.open {
						width: 100%;
						text-align: center;
						font-size: 28rpx;
						color: #0077BE;
						margin-top: 30rpx;
						display: flex;
						justify-content: center;
					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;
						margin-top: 22rpx;
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						margin-top: 24rpx;
						/* 限制文本为2行 */
						overflow: hidden;
					}
				}
			}

			.jiageinfo {
				width: 100%;
				overflow: hidden;
				position: relative;
				height: 170rpx;

				.jiageinfoback {
					width: 100%;
					position: absolute;
					z-index: -1;
					height: 170rpx;
				}

				.jiageline {
					width: 686rpx;
					margin: auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 38rpx;

					.gnq {
						display: flex;
						align-items: center;
						margin-right: 18rpx;

						.righttex {
							width: 44rpx;
							height: 44rpx;
							position: relative;
							display: flex;
							border: none !important;
							align-items: center;
							overflow: auto !important;
							background-color: none !important;
							background-size: 100% 138% !important;
							margin-left: 0rpx !important;
							margin-right: 36rpx !important;
							-webkit-tap-highlight-color: none !important;
							margin-right: 0 !important;
							overflow: hidden !important;

							&:after {
								border: none;
								background-color: none !important;
							}

							.rightteximg {
								width: 44rpx;
								height: 44rpx;
								position: absolute;
							}

						}

						image {
							width: 44rpx;
							height: 44rpx;
						}
					}

					.jigae {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;

						.memberjiage {
							padding: 0 20rpx;
							height: 42rpx;
							border-radius: 0rpx 21rpx 21rpx 21rpx;
							background: #A46F3A;
							text-align: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
							margin-left: 20rpx;
							line-height: 42rpx;
						}
					}
				}
			}
		}

		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
	}

	::v-deep .u-swiper {
		border-radius: 0px !important;
		background-color: rgba(0, 0, 0, 0) !important;
	}

	::v-deep .u-swiper__wrapper__item__wrapper__image {
		border-radius: 0px !important;
	}
</style>